<template>
  <div class="container">
    <nav class="clearfix">
      <ul v-if="data">
        <li v-for="(item,index) in data.nav" :key="item.id" :class='{"on":onFlag===index}' @click="changeIndex(index)">
          <a href="javascript:void(0)">
            {{item.title}}
          </a>
        </li>
      </ul>
      <ol v-if="data">
        <li :class="{'open':openFlag==='third'}" @click="changeId('third')">
          <i class="el-icon-success"></i>
          <a href="javascript:void(0)">
            {{third}}
          </a>
        </li>
        <li :class="{'open':openFlag==='second'}" @click="changeId('second')">
          <i class="el-icon-remove"></i>
          <a href="javascript:void(0)">
            {{second}}
          </a>
        </li>
        <li :class="{'open':openFlag==='first'}" @click="changeId('first')">
          <i class="el-icon-warning"></i>
          <a href="javascript:void(0)">
            {{first}}
          </a>
        </li>
      </ol>
    </nav>
    <main>
      <ul>
        <li class="box" v-for="item in data.components" :key="item.id">
          <div class="bg"></div>
          <a class="img-box" href="javascript:void(0)">
            <img :src="item.src" alt="">
          </a>
          <div class="outer">
            <div class="text">
              <h2 class="ellipsis">
                {{item.title}}
              </h2>
              <a class="tui" href="javascript:void(0)">
                <img :src="item.rec_src" alt="">
                <span>/推</span>
              </a>
            </div>
            <div class="num">
              <span class="classify">原创</span>
              <span>
                <i class="icon-icon_browse"></i>
                <em>
                  {{item.watch}}
                </em>
              </span>
              <span>
                <i class="icon-tool_icon_comment"></i>
                <em>
                  {{item.message}}
                </em>
              </span>
              <span>
                <i class="icon-inspiration_icon_like_nor"></i>
                <em>
                  {{item.support}}
                </em>
              </span>
            </div>
            <div class="user clearfix">
              <div class="des">
                <a class="user-box" href="javascript:void(0)">
                  <img :src="item.user" alt="">
                </a>
                <span class="user-des">
                  <a href="javascript:void(0)">
                    <em>
                      {{item.username}}
                    </em>
                  </a>
                  <a v-if="item.first" href="javascript:void(0)">
                    <i class="icon-recommendation_designer"></i>
                  </a>
                  <a v-if="item.second" href="javascript:void(0)">
                    <i class="icon-certified2"></i>
                  </a>
                  <a v-if="item.third" href="javascript:void(0)">
                    <img src="../../../assets/images/tanhao.png" alt="">
                  </a>
                  <a v-if="item.fourth" href="javascript:void(0)">
                    <img src="../../../assets/images/v.png" alt="">
                  </a>
                </span>
              </div>
              <div class="follow">
                <a href="javascript:void(0)">关注</a>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </main>
  </div>
</template>
<script>
  import '../../../assets/font2.css'
  export default {
    data: () => ({
      onFlag: 0,
      openFlag: 'first'
    }),
    created() {
      this.$store.dispatch('getData')
    },
    methods: {
      changeIndex(index) {
        this.onFlag = index
      },
      changeId(str) {
        this.openFlag = str
      }
    },
    computed: {
      data() {
        return this.$store.state.itjun.data
      },
      first() {
        return this.data.banner[0].title
      },
      second() {
        return this.data.banner[1].title
      },
      third() {
        return this.data.banner[2].title
      }
    }
  }

</script>
<style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .iconfont,
  [class^="icon-"],
  [class*=" icon-"] {
    font-family: "iconfont" !important;
    font-size: 16px;
    color: #b8c4ce;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    /*  -webkit-font-smoothing: none;
    -webkit-text-stroke-width: initial;
    -moz-osx-font-smoothing: initial;*/
  }

  a {
    text-decoration: none;
    color: #000
  }

  li {
    list-style: none;
  }

  i,
  em {
    font-style: normal;
  }

  body {
    background-color: #eff3f5;
  }

  .clearfix::after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }

  .ellipsis {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .container {
    width: 1180px;
    margin: 0 auto;

    nav {
      ul {
        float: left;
        margin-top: 15px;

        .on {
          a {
            border: 1px solid #3d7eff;
            border-radius: 20px;
            font-weight: bold;
            color: #3d7eff;
          }
        }

        li {
          width: 123px;
          height: 42px;
          float: left;

          &:hover {
            a {
              color: #3d7eff;
            }
          }

          a {
            display: block;
            height: 40px;
            margin-right: 25px;
            padding: 0 20px;
            font-size: 14px;
            line-height: 40px;
            text-align: center;
            color: #7c7c7c;
          }
        }
      }

      ol {
        float: right;
        position: relative;
        height: 40px;
        margin-top: 15px;
        padding: 0 110px 0 20px;
        background-color: #fff7e7;
        border-radius: 20px;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, .2);

        .open {
          i {
            color: #e67e22;
          }

          a {
            display: block;
          }
        }

        li {
          float: left;

          &:first-child {
            i {
              right: 7px;
            }
          }

          &:nth-child(2) {
            i {
              right: 41px;
            }
          }

          &:last-child {
            i {
              right: 75px;
            }
          }

          a {
            display: none;
            font-size: 14px;
            color: #6b3612;
            line-height: 40px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 350px;
          }

          i {
            position: absolute;
            top: 8px;
            font-size: 28px;
            cursor: pointer;
          }
        }
      }
    }

    main {
      ul {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;

        li {
          position: relative;
          width: 280px;
          margin-right: 20px;
          margin-bottom: 15px;
          transition: all .2s;
          border-radius: 5px;

          &:nth-child(4n) {
            margin-right: 0;
          }

          &:hover {
            .follow {
              a {
                opacity: 1 !important;
              }
            }

            .tui {
              opacity: 1 !important;
            }

            .bg {
              opacity: 1;
            }

            .img-box {
              img {
                transform: scale(1.05);
              }
            }

            .user-des {
              em {
                color: #3d7eff;
              }
            }
          }

          .bg {
            position: absolute;
            opacity: 0;
            top: -5px;
            right: -5px;
            bottom: 0;
            left: -5px;
            background-color: #fff;
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
          }

          .img-box {
            position: relative;
            display: block;
            width: 280px;
            height: 210px;
            overflow: hidden;
            border-radius: 5px;

            img {
              width: 100%;
              height: 100%;
              transition: all .2s
            }
          }

          .outer {
            padding: 5px 0 10px 5px;
          }

          .text {
            position: relative;

            h2 {
              max-width: 217px;
              font-weight: bold;
              color: #34495e;
              font-size: 14px;
            }

            .tui {
              opacity: 0;
              transition: all .2s;
              position: absolute;
              text-align: center;
              right: 6px;
              top: 3px;
              height: 22px;
              line-height: 22px;
              width: 50px;
              font-size: 12px;

              img {
                display: inline-block;
                vertical-align: middle;
                width: 22px;
                height: 22px;
                border-radius: 50%;
              }

              span {
                display: inline-block;
                vertical-align: middle;
                font-size: 12px;
                color: #9fb0bd;
              }
            }
          }

          .num {
            position: relative;
            font-size: 12px;
            margin-top: 5px;

            span {
              margin-right: 10px;
              display: inline-block;

              i {
                font-size: 18px;
                color: #9fb0bd;
                margin-right: 5px;
                display: inline-block;
                line-height: 21px;
                vertical-align: middle;
              }

              em {
                font-size: 14px;
                color: #9fb0bd;
                display: inline-block;
                line-height: 21px;
                vertical-align: middle;
              }
            }

            .classify {
              height: 20px;
              padding: 0 5px;
              color: #9fb0bd;
              line-height: 19px;
              text-align: center;
              background-color: #dfe5e9;
              border-radius: 3px;
            }
          }

          .user {
            position: relative;
            margin-top: 7px;

            .des {
              width: 190px;
              height: 20px;
              float: left;

              .user-box {
                display: inline-block;
                height: 20px;
                line-height: 20px;
                float: left;

                img {
                  width: 20px;
                  height: 20px;
                  border-radius: 50%;
                }
              }

              .user-des {
                float: left;
                margin-left: 10px;
                color: #34495e;
                display: flex;
                align-items: center;
                transition: all .2s;

                a {
                  display: inline-block;
                  height: 20px;
                  line-height: 20px;

                  &:nth-child(2) {
                    i {
                      color: #e74c3c;
                    }
                  }

                  &:nth-child(3) {
                    i {
                      color: #3d7eff;
                    }
                  }

                  em {
                    font-size: 12px;
                    margin-right: 3px;
                    font-weight: normal;
                  }

                  i {
                    margin-right: 1px;
                    font-size: 14px;
                    vertical-align: middle;
                    margin-top: -2px;

                  }

                  img {
                    width: 14px;
                    height: auto;
                    display: inline-block;
                    vertical-align: middle;
                    margin-top: 4px;
                  }
                }
              }
            }

            .follow {
              float: right;

              a {
                display: inline-block;
                color: #3d7eff;
                font-size: 12px;
                line-height: 20px;
                height: 20px;
                padding: 0 10px;
                border-radius: 20px;
                cursor: pointer;
                opacity: 0;

                transition: all .2s;

                &:hover {
                  background-color: #3d7eff;
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }

</style>
